<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-17 10:14:54
-->
<template>
    <div >
        <div class="wrapper">
            <div class="left" style="position: relative;">
                <div class="hot">
                    <span class="text">正在热映</span> <span class="text_bac">全部正在热映》 即将上映》</span>
                    <div class="arrow">
                        <span style="margin-top:3px;">{{key}} / 3</span>
                        <el-button type="primary" @click="prev_pic()" icon="el-icon-arrow-left"  size="mini" circle style="font-size: 8px;" ></el-button>
                        <el-button type="primary" @click="next_pic()" icon="el-icon-arrow-right"  size="mini" circle style="font-size: 8px;" ></el-button>
                    </div>
                    <div style="border-top:1px solid #d3d3d3;margin-top:10px;"></div>
                <!-- 热播  -->
                    <div class="articles">
                        <div class="box" ref="box" style="left:0px;">
                            <div class="article" v-for="item in articleData" :key="item.id">
                                <div class="pic" @click="clickArticle(item.id)">
                                    <img width="100%" height="100%" :src="item.cover" alt="">
                                </div>
                                <div class="info"  @click="clickArticle(item.id)">
                                    <div>{{item.title}}</div>              
                                </div>
                            </div>                   
                        </div>
                    </div>   
                </div>
                <div class="movies">
                    <div class="header" >
                        <span class="text" style="float:left;">最近热门电影</span>
                        <div class="category" ref="'category'+id" @click="getArticleCategory(item.id)" v-for="item in allCategory" :key="item.id">{{item.name}}</div>
                    </div>
                    <div style="border-top:1px solid #d3d3d3;margin-top:10px;"></div>
                    <div class="box">
                        <div class="article" v-for="item in articleCategory" :key="item.id">
                                <div class="pic" @click="clickArticle(item.id)">
                                    <img width="100%" height="100%" :src="item.cover" alt="">
                                </div>
                                <div class="info"  @click="clickArticle(item.id)">
                                    <div>{{item.title}}</div>              
                                </div>
                            </div> 
                    </div>        
                </div>
            </div>
            <div class="right"></div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .wrapper{
        .left{
            width: 700px;
            float: left;
            .hot{
                width: 700px;
            .text{
            font-size: 16px;
            color: black;
            }
            .text_bac{
                color: #37a;
                font-size: 12px;
                

            }
            .arrow{
                float: right;
            }
             .articles {
                width: 100%;
                overflow: hidden;
                position: relative;
                white-space:nowrap;/*内容横向排列不换行*/
                height: 250px;
                .box {
                    height: 250px;
                    position: absolute;
                    width: 2100px; 
                .article {
                    
                    width: 140px;
                    float: left;
                    overflow: hidden;
                    cursor: pointer;
                    padding: 1em;
                    box-sizing: border-box;
                    .pic {
                        height: 160px;
                        cursor: pointer;
                    }
                    .info {
                        div {
                            margin: 10px 0;
                            line-height: 2em;
                            cursor: pointer;
                            color: black;
                        }
                    }
                }
            }
        }
            }
            .movies{
                width: 700px;
                height: 505px;
                .header{
                    
                     .text{
                    font-size: 16px;
                    color: black;
                    }
                    .category{
                        padding-top: 5px;
                        padding-left: 5px;
                        float:left;
                        font-size: 12px;
                        cursor: pointer;
                    }
                }
                .header::after{
                    content:""; 
                    display: block; 
                    clear: both; 
                }
                .box{
                    width: 700px;
                    float: left;
                    height: 472px;
                    .article {
                    width: 140px;
                    float: left;
                    cursor: pointer;
                    padding: 1em;
                    box-sizing: border-box;
                    white-space:nowrap;
                    overflow: hidden;
                    .pic {
                        height: 160px;
                        cursor: pointer;
                    }
                    .info {
                        div {
                            margin: 10px 0;
                            line-height: 2em;
                            cursor: pointer;
                            color: black;
                        }
                    }
                  }
                }
                .box::after{
                    content:""; 
                    display: block; 
                    clear: both; 
                }
            }
        }
        .left::after{
            content:""; 
            display: block; 
            clear: both; 
        }
    }
</style>
<script>
import {get} from '../utils/request'
export default {
    data(){
        return{
            allCategory:[],
            articleData:[],
            articleCategory:[],
            key:1,
            
        };
    },
    created(){
        this.init();
    },
    methods:{
        init(){
            this.getArticleData();
            this.getAllCategory();
            this.getArticleCategory();
        },
        getArticleData() {
            this.articleData = [];
            get("index/article/pageQuery", {
                page: 1,
                pageSize: 15,
            }).then((res) => {
                if (res && res.status == 200 && res.data && res.data.list) {  
                    this.articleData = res.data.list;
                }
               
            });
        },
        getAllCategory(){
            this.allCategory = [];
            get("index/category/findAll",).then((res) => {
                if (res && res.status == 200 && res.data ) {  
                    this.allCategory = res.data;
                }
            })   
        },
        getArticleCategory(id){
            this.articleCategory = [];
             get("index/article/pageQuery", {
                page: 1,
                pageSize: 15,
                categoryId:id?id:3,
            }).then((res) => {
                if (res && res.status == 200 && res.data && res.data.list) {  
                    this.articleCategory = res.data.list;
                }
            });
            this.$refs[`category${this.id}`].style.color = black;
        },
        next_pic () {
            if(parseInt(this.$refs.box.style.left) != -1400){
            var newLeft = parseInt(this.$refs.box.style.left)-700;
            this.$refs.box.style.left = newLeft + "px";
            this.key++;
            }else{
                this.$refs.box.style.left = 0 + "px";
                this.key = 1;
            }
        },
        prev_pic () {
            if(parseInt(this.$refs.box.style.left) != 0){
            var newLeft = parseInt(this.$refs.box.style.left)+700;
            this.$refs.box.style.left = newLeft + "px";
            this.key--;
            }else{
                this.$refs.box.style.left = -1400 + "px";
                this.key = 3;
            }
        },   
    },
}
</script>